<template>
  <div class="container">
    <div class="left">
      <div class="item">
        <div class="label">商品名称:</div>
        <div class="input">
          <el-input
            v-model="product.name"
            placeholder="搜索关键字"
            maxlength="40"
            show-word-limit
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">描述:</div>
        <div class="input">
          <el-input
            v-model="product.description"
            placeholder="介绍一下商品吧..."
            maxlength="40"
            show-word-limit
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">当前库存量:</div>
        <div class="input">
          <el-input
            @input="remainOnInput"
            v-model="product.remain"
            placeholder="> 0"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">单价:</div>
        <div class="input">
          <el-input
            v-model="product.price"
            @input="onPriceInput"
            placeholder="1.58"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">省:</div>
        <div class="input">
          <el-input v-model="product.province" placeholder="广东省"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">市:</div>
        <div class="input">
          <el-input v-model="product.city" placeholder="中山市"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">区:</div>
        <div class="input">
          <el-input v-model="product.county" placeholder="石岐区"></el-input>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="upload_button">
        <img
          :src="image"
          alt=""
          v-show="image != null && image != ''"
          class="show"
        />
        <img
          src="../../static/images/upload.png"
          alt=""
          @click="uploadButtonClick"
          v-show="image == null || image == ''"
          class="upload_icon"
        />
      </div>
      <input id="pic" type="file" accept=".png,.jpg" @change="upload" hidden />
      <div class="submit">
        <el-button type="primary" plain class="button" @click="onSubmit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>


<script>
import { isIntegearNumber, isNumber } from "../../common/utils/verify";
export default {
  data() {
    return {
      product: {
        name: "",
        description: "",
        remain: "",
        price: "",
        province: "",
        city: "",
        county: "",
      },
      image: "",
    };
  },
  methods: {
    remainOnInput() {
      if (this.product.remain <= 0 || !isIntegearNumber(this.product.remain)) {
        this.$message.error("库存量不合法");
      }
    },
    onPriceInput() {
      if (this.product.price <= 0 || !isNumber(this.product.price)) {
        this.$message.error("价格格式错误");
      }
    },
    uploadButtonClick() {
      let input = document.getElementById("pic");
      input.click();
    },
    upload(e) {
      let file = e.target.files[0];
      let formdata = new FormData();
      formdata.append("file", file);
      this.$http({
        url: "/productImage/uploadPic",
        method: "post",
        data: formdata,
      }).then((res) => {
        if (res != null && res != "") {
          this.image = res;
        } else {
          this.$message.error("上传失败");
        }
      });
    },
    onSubmit() {
      if (
        this.product.name == "" ||
        this.product.description == "" ||
        this.product.remain == "" ||
        this.product.price == "" ||
        this.product.province == "" ||
        this.product.city == "" ||
        this.product.county == ""
      ) {
        this.$message.error("必填项不能为空");
      } else if (this.image == "") {
        this.$message.info("先上传一张图片吧");
      } else {
        let addProductDto = this.product
        addProductDto.path = this.image
        console.log(addProductDto);
        this.$http({
          url: '/product/add',
          method: 'post',
          data: addProductDto
        }).then(res => {
          if (res == null || res == 0) {
            this.$message.error('发布出错')
          }else {
            this.$message.success('发布成功')
          }
        })
      }
    },
  },
};
</script>


<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px;
  padding-right: 50px;
}

.left .item {
  flex: 1;
  display: flex;
  align-items: center;
}

.label {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #606266;
}

.input {
  flex: 5;
}

.right {
  flex: 1;
  flex-direction: column;
  padding: 50px;
  display: flex;
  flex-direction: column;
}

.upload_button {
  height: 500px;
  display: flex;
  align-items: center;
  border: 1px solid gray;
  border-radius: 19px;
  flex: 5;
}

.upload_button .upload_icon {
  margin: auto;
  cursor: pointer;
}

.upload_button .show {
  width: 100%;
  height: 100%;
}

.submit {
  flex: 1;
  display: flex;
  align-items: center;
}

.submit .button {
  margin: auto;
  width: 150px;
}
</style>